<template>
  <div class="phone-wrapper">
    <view v-if="step1" class="fixed-btm">
      <view class="ver-code">
        <view class="sendcode">
          <view class="sendcode-title">获取验证码</view>
          <view class="sign-form">
            <view class="input-box">
              <input
                v-model="phone"
                placeholder="输入手机号"
                placeholder-class="placeholder"
                class="input"
                :disabled="true"
                type="number"
              >
            </view>
            <view class="input-box">
              <input
                v-model="code"
                placeholder="输入验证码"
                placeholder-class="placeholder"
                class="input"
                type="text"
              >
              <button
                :disabled="disabledGetVerificationCode"
                class="input-button"
                @click="getVerificationCode(1)"
              >{{ showTimmer ? second :text }}</button>
            </view>
          </view>
        </view>
      </view>
      <view class="btnrow">
        <button :disabled="disabledSubmit" class="btn btn-preview" @click="confirm1">下一步</button>
      </view>
    </view>
    <view v-else class="fixed-btm">
      <view class="ver-code">
        <view class="sendcode">
          <view class="sendcode-title">获取验证码</view>
          <view class="sign-form">
            <view class="input-box">
              <input
                v-model="phone2"
                placeholder="输入手机号"
                placeholder-class="placeholder"
                class="input"
                type="number"
              >
            </view>
            <view class="input-box">
              <input
                v-model="code2"
                placeholder="输入验证码"
                placeholder-class="placeholder"
                class="input"
                type="text"
              >
              <button
                :disabled="disabledGetVerificationCode"
                class="input-button"
                @click="getVerificationCode(2)"
              >{{ showTimmer ? second :text }}</button>
            </view>
          </view>
        </view>
      </view>
      <view class="btnrow">
        <button :disabled="disabledSubmit" class="btn btn-preview" @click="confirm2">确认更换</button>
      </view>
    </view>
  </div>
</template>
<script>
import { checkPhone } from "@/utils/validate"
import { sendCodeReq, checkCodeReq, commonSendCodeReq, updatePhoneReq } from '@/services/auth'
import { mapState } from 'vuex'
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      phone: '',
      code: '',
      phone2: '',
      code2: '',
      voucher: '',
      showTimmer: false,
      second: 60,
      text: "获取验证码",
      disabledGetVerificationCode: false,
      disabledSubmit: true,
      step1: true,
      timer: null
    };
  },
  computed: {
    ...mapState(['user', 'settings'])
  },
  watch: {},
  created() {},
  mounted(){
    this.phone = this.user.phone
  },
  methods: {
    sendCode(){
      sendCodeReq(this.phone).then(() => {
        uni.showToast({
          title: '验证码发送成功',
          icon: 'none',
          duration: 2000
        })
        this.showTimmer = true
        this.disabledGetVerificationCode = true
        this.disabledSubmit = false
        this.timer = setInterval(() => {
          this.second = this.second - 1
          if (this.second === 0) {
            this.disabledGetVerificationCode = false
            this.showTimmer = false
            this.second = 60
            this.text = "重新获取"
            clearInterval(this.timer)
          }
        }, 1000)
      }).catch((err) => {
        console.log('debug log --> ', err)
        uni.showToast({
          title: err,
          icon: "none",
          duration: 2000
        })
      })
    },
    sendCode2(){
      commonSendCodeReq(this.phone2).then(() => {
        uni.showToast({
          title: '验证码发送成功',
          icon: 'none',
          duration: 2000
        })
        this.showTimmer = true
        this.disabledGetVerificationCode = true
        this.disabledSubmit = false
        this.timer = setInterval(() => {
          this.second = this.second - 1
          if (this.second === 0) {
            this.disabledGetVerificationCode = false
            this.showTimmer = false
            this.second = 60
            this.text = "重新获取"
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }).catch((err) => {
        console.log('debug log --> ', err)
        uni.showToast({
          title: err,
          icon: "none",
          duration: 2000
        })
      })
    },
    getVerificationCode(step = 1) {
      // 手机号格式校验
      if (checkPhone(this.phone)) {
        if (step === 1) {
          this.sendCode()
        } else {
          if (this.phone === this.phone2) {
            uni.showToast({
              title: "新手机号必须与原手机号不同",
              icon: "none",
              duration: 2000
            })
            return
          }
          this.sendCode2()
        }
      } else {
        uni.showToast({
          title: "手机号格式错误",
          icon: "none",
          duration: 2000
        })
      }
    },
    confirm1() {
      this.disabledSubmit = true
      checkCodeReq({
        phone: this.phone,
        code: this.code
      }).then(res => {
        this.voucher = res
        this.step1 = false

        clearInterval(this.timer)
        this.disabledGetVerificationCode = false
        this.showTimmer = false
        this.second = 60
        this.text = "获取验证码"
      }).catch(err => {
        this.disabledSubmit = false
        uni.showToast({
          title: "手机号验证失败",
          icon: "none",
          duration: 2000
        })
      })
    },
    confirm2() {
      this.disabledSubmit = true
      updatePhoneReq({
        oldPhone: this.phone,
        phone: this.phone2,
        code: this.code2,
        voucher: this.voucher
      }).then(res => {
        this.disabledSubmit = false
        uni.showToast({
          title: "手机号更换成功，请重新登录",
          icon: "none",
          duration: 2000
        })
        setTimeout(() => {
          uni.clearStorageSync();
          this.$store.commit("site/clearSiteInfo");
          this.$store.commit("user/clearUserInfo");
          this.$store.commit("register/clearRegister");
          uni.reLaunch({
            url: "/pages/index/index",
          });
        }, 2000)
      }).catch(err => {
        this.disabledSubmit = false
        uni.showToast({
          title: "手机号更换失败",
          icon: "none",
          duration: 2000
        })
      })
    }
  }
};
</script>
<style lang="scss">
.phone-wrapper{
  width:100%;
  .fixed-btm{
    width: 100%;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    height: 350px;
    background: $white;
    border-radius: 20px 20px 0px 0px;
    .btnrow{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .btn{
        width: 100%;
        height: 50px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 400;
        line-height: 50px;
      }
      button::after{
        outline: none;
        border: none;
      }
      .btn-preview{
        color: $white;
        background: $theme;
      }
    }
    .sendcode{
      padding-top: 15px;
      .sendcode-title{
        font-size:18px;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:25px;
        text-align: left;
      }
    }
  }
}
</style>
